<template>
    <div>
      <van-popup v-model="showPicker" position="bottom" round
                 style="height: 50%; padding-top: 4px;">
          <br>
          <span class="sp7">存取记录</span>
          <van-icon name="cross" class="v3" @click="guan"/>
        <van-steps direction="vertical" :active="4">
          <van-step>
            <span class="sp5">订单创建成功</span>
            <span class="sp6">12月08日 20:24</span>
            <br>
            <br>
          </van-step>
          <van-step>
            <span class="sp5">订单已支付</span>
            <span class="sp6">12月08日 20:25</span>
            <br>
            <br>
          </van-step>
          <van-step>
            <span class="sp5">派件成功</span>
            <span class="sp6">12月08日 20:27</span>
            <br>
            <br>
          </van-step>
          <van-step v-if="this.form.status==3">
            <span class="sp5">包裹已超时</span>
            <span class="sp6">12月08日 20:27</span>
            <br>
            <br>
          </van-step>
          <van-step v-if="this.form.status==3 || this.form.status==1">
            <span class="sp5" >等待顾客取件</span>
          </van-step>
          <van-step v-if="this.form.status==6">
            <span class="sp5">顾客已取件</span>
          </van-step>
          <van-step v-if="this.form.status==4">
            <span class="sp5">顾客已撤回</span>
          </van-step>
        </van-steps>
      </van-popup>
    </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      showList: [],
      showPicker: true,
      active:'',
      form:{}
    };
  },
  methods: {
    guan(){
        this.showList = false;
        this.showPicker = false;
        this.$router.push({
          path: '/index/Detail'
        });
      }
  },
  created() {
    this.active = this.$route.query.active;
    var login = JSON.parse(localStorage.getItem('login'));
    let id = login.id;
    console.log(id);
    axios.get("http://localhost:11219/dspatch/package/"+id).then(res=>{
      if(res.status==200){
        this.form=res.data;
        console.log(this.form);
      }
    })
  }
};
</script>

<style scoped>
   .v3{
     float: right;
     margin-right: 15px;
     margin-top: 3px;
   }
   .sp7{
     margin-left: 37px;
   }
   .sp5{
     float: left;
   }
   .sp6{
    float: right;
   }
</style>